<template>
    <div>
        <div class="backg">
            <img src="demob/t3.png" alt="">
            <div class="con">
                <img src="demob/search1.png" alt="">
                <span class="font1">品牌型号</span>
                <span class="font2">搜行情</span>
            </div>
            <p class="list">
                <span class="p1">大家都在搜：</span>
                <span class="p2">劳力士 116610</span>
                <span class="p3">江诗丹顿 5500</span>
            </p>
            <p class="list1">
                <span class="p4">爱彼 15400</span>
                <span class="p5">百达翡丽 5711</span>
            </p>
            
        </div>
        <Status/>
        <Font/>
    </div>
</template>

<script>
import Status from "./status.vue"
import Font from "./fontList.vue"
export default {
    components:{
        Status,
        Font
    }
}
</script>

<style lang="scss" scoped>
    .backg{
        width: 100%;
        height: 4rem;
        background: url(../../../public/demob/t1.jpg);
        background-size: 100% 4rem;
        img{
            margin-top: 1.3rem;
            width: 1.67rem;
            height: 0.32rem;
            margin-left: 1rem;
        }
        .con{
            width: 3.43rem;
            height: 0.48rem;
            background-color: #fff;
            border-radius: 1rem;
            margin-top: 0.1rem;
            margin-left: 0.15rem;
            display: flex;
            img{
                width: 0.28rem;
                height: 0.29rem;
                margin-top: 0.1rem;
                margin-left: 0.2rem;
            }
            .font1{
                line-height: 0.48rem;
                margin-left: 0.1rem;
                font-size: 0.14rem;
                color: #b3b3b3;
            }
            .font2{
                display: inline-block;
                width: 0.79rem;
                height: 0.36rem;
                position: absolute;
                right: 0.3rem;
                line-height: 0.36rem;
                background: linear-gradient(308deg,#ff9f00,#ff9100);
                color: #fff;
                margin-top: 0.06rem;
                text-align: center;
                border-radius: 1rem;
            }  
        }
        .list{
            width: 100%;
            display: flex;
            padding-left: 0.5rem;
            margin-top: 0.2rem;
            span{
                font-size: 0.12rem;
                color: #ffffff99;
            }
            .p2{
                width: 1.01rem;
                height: 0.24rem;
                background-color: #00000033;
                border-radius: 1rem;
                line-height: 0.24rem;
                text-align: center;
                color: #ff9419;
            }
            .p3{
                 width: 0.99rem;
                height: 0.24rem;
                background-color: #00000033;
                border-radius: 1rem;
                line-height: 0.24rem;
                text-align: center;
                margin-left: 0.05rem;
            }
        }
        .list1{
            // width: 2rem;
            color: #ffffff99;
            font-size: 0.12rem;
            margin-top: 0.05rem;
            margin-left: 1.15rem;
            .p4{
                display: inline-block;
                width: 0.99rem;
                height: 0.24rem;
                background-color: #00000033;
                border-radius: 1rem;
                line-height: 0.24rem;
                text-align: center;
                margin-left: 0.05rem; 
            }
             .p5{
                 display: inline-block;
                width: 0.99rem;
                height: 0.24rem;
                background-color: #00000033;
                border-radius: 1rem;
                line-height: 0.24rem;
                text-align: center;
                margin-left: 0.05rem; 
            }
        }
        
    }
</style>